import { Navigate, Outlet } from 'react-router-dom';
import { Layout, Menu } from 'antd';
import { UnorderedListOutlined, DashboardOutlined, LogoutOutlined } from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';

const { Header, Content } = Layout;

const PrivateRoute = () => {
  const token = localStorage.getItem('token');
  const navigate = useNavigate();

  if (!token) {
    return <Navigate to="/login" />;
  }

  const handleLogout = () => {
    localStorage.removeItem('token');
    navigate('/login');
  };

  return (
    <>
      <Header>
        <Menu
          theme="dark"
          mode="horizontal"
          defaultSelectedKeys={[window.location.pathname]}
          items={[
            {
              key: '/todos',
              icon: <UnorderedListOutlined />,
              label: '待办事项',
              onClick: () => navigate('/todos'),
            },
            {
              key: '/dashboard',
              icon: <DashboardOutlined />,
              label: '数据统计',
              onClick: () => navigate('/dashboard'),
            },
            {
              key: 'logout',
              icon: <LogoutOutlined />,
              label: '退出登录',
              onClick: handleLogout,
            },
          ]}
        />
      </Header>
      <Content style={{ padding: '24px', minHeight: 'calc(100vh - 64px)' }}>
        <Outlet />
      </Content>
    </>
  );
};

export default PrivateRoute; 